<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sidebar</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="sidebar">
    <div class="sidebar-top-wrapper">
      <div class="sidebar-top">
        <a href="#" class="logo__wrapper">
          <img src="assets/logo.svg" alt="Logo" class="logo-small">
          <span class="hide company-name">
            HUGE iCONS
          </span>
        </a>
      </div>
      <button class="expand-btn" type="button">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.00979 2.72L10.3565 7.06667C10.8698 7.58 10.8698 8.42 10.3565 8.93333L6.00979 13.28"
            stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </button>
    </div>
    <div class="sidebar-links-wrapper">
      <div class="sidebar-links">
        <ul>
          <li>
            <a href="#dashboard" title="Dashboard" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M1.82764 11.8634C1.82764 8.49248 1.82764 6.80699 2.57126 5.61223C2.84639 5.17021 3.18813 4.78574 3.58105 4.47623C4.64306 3.63965 6.14126 3.63965 9.13767 3.63965H12.7927C15.7891 3.63965 17.2873 3.63965 18.3493 4.47623C18.7422 4.78574 19.084 5.17021 19.3591 5.61223C20.1027 6.80699 20.1027 8.49248 20.1027 11.8634C20.1027 15.2344 20.1027 16.9199 19.3591 18.1146C19.084 18.5567 18.7422 18.9411 18.3493 19.2506C17.2873 20.0872 15.7891 20.0872 12.7927 20.0872H9.13767C6.14126 20.0872 4.64306 20.0872 3.58105 19.2506C3.18813 18.9411 2.84639 18.5567 2.57126 18.1146C1.82764 16.9199 1.82764 15.2344 1.82764 11.8634Z"
                  stroke="#141B34" stroke-width="1.4" />
                <path d="M8.68066 3.63965L8.68066 20.0872" stroke="#141B34" stroke-width="1.4"
                  stroke-linejoin="round" />
                <path d="M4.56885 7.29492H5.4826M4.56885 10.0362H5.4826" stroke="#141B34" stroke-width="1.4"
                  stroke-linecap="round" stroke-linejoin="round" />
              </svg>

              <span class="link hide">Dashboard</span>
            </a>
          </li>
        </ul>
        <h2>People</h2>
        <div class="divider"></div>
        <ul>

          <li>
            <a href="#team" title="Team" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_15_5297)">
                  <path
                    d="M18.9821 17.2756C19.6667 17.2756 20.2113 16.8447 20.7003 16.2423C21.7013 15.009 20.0578 14.0234 19.431 13.5407C18.7938 13.05 18.0824 12.7721 17.361 12.7068M16.4473 10.8793C17.7089 10.8793 18.7317 9.85656 18.7317 8.59493C18.7317 7.3333 17.7089 6.31055 16.4473 6.31055"
                    stroke="#141B34" stroke-width="1.4" stroke-linecap="round" />
                  <path
                    d="M2.94755 17.2756C2.26287 17.2756 1.71829 16.8447 1.22932 16.2423C0.22834 15.009 1.8718 14.0234 2.49861 13.5407C3.1358 13.05 3.84726 12.7721 4.56859 12.7068M5.02547 10.8793C3.76384 10.8793 2.74108 9.85656 2.74108 8.59493C2.74108 7.3333 3.76384 6.31055 5.02547 6.31055"
                    stroke="#141B34" stroke-width="1.4" stroke-linecap="round" />
                  <path
                    d="M7.38635 14.6364C6.4527 15.2138 4.00471 16.3926 5.4957 17.8677C6.22403 18.5883 7.03521 19.1036 8.05506 19.1036H13.8745C14.8944 19.1036 15.7056 18.5883 16.4339 17.8677C17.9249 16.3926 15.4769 15.2138 14.5432 14.6364C12.3538 13.2826 9.57576 13.2826 7.38635 14.6364Z"
                    stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  <path
                    d="M14.1629 7.68154C14.1629 9.44782 12.731 10.8797 10.9647 10.8797C9.19846 10.8797 7.7666 9.44782 7.7666 7.68154C7.7666 5.91525 9.19846 4.4834 10.9647 4.4834C12.731 4.4834 14.1629 5.91525 14.1629 7.68154Z"
                    stroke="#141B34" stroke-width="1.4" />
                </g>
                <defs>
                  <clipPath id="clip0_15_5297">
                    <rect width="21.9301" height="21.9301" fill="white" transform="translate(0 0.828125)" />
                  </clipPath>
                </defs>
              </svg>
              <span class="link hide">Team</span>
              <div class="tag hide">New</div>

            </a>
          </li>
          <li>
            <a href="#onboarding" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.8789 14.5088C9.78491 19.9913 3.92166 14.5088 1.82764 19.9913" stroke="#141B34"
                  stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M14.1636 14.509H15.5354C17.6891 14.509 18.766 14.509 19.4351 13.8399C20.1041 13.1708 20.1041 12.094 20.1041 9.94022V8.11272C20.1041 5.95898 20.1041 4.88211 19.4351 4.21303C18.766 3.54395 17.6891 3.54395 15.5354 3.54395L11.8804 3.54395C9.72661 3.54395 8.64974 3.54395 7.98066 4.21303C7.41376 4.77993 7.32719 5.63958 7.31396 7.19896"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <ellipse cx="6.85323" cy="12.2248" rx="2.28439" ry="2.28439" stroke="#141B34" stroke-width="1.4"
                  stroke-linecap="round" stroke-linejoin="round" />
                <path d="M10.9653 7.19922L16.4479 7.19922M16.4479 10.8542L13.7066 10.8542" stroke="#141B34"
                  stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="link hide">Onboarding</span>
            </a>
          </li>
          <li>
            <a href="#talent" title="Talent" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M2.74121 10.7832L2.8809 13.7318C3.031 16.8766 3.10604 18.449 4.16561 19.4133C5.22519 20.3776 6.87792 20.3776 10.1834 20.3776H11.7466C15.0521 20.3776 16.7048 20.3776 17.7644 19.4133C18.824 18.449 18.899 16.8766 19.0491 13.7318L19.1888 10.7832"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M2.60142 10.2747C4.15416 13.2274 7.65632 14.4386 10.9648 14.4386C14.2734 14.4386 17.7755 13.2274 19.3283 10.2747C20.0695 8.86524 19.5082 6.21484 17.6828 6.21484H4.24693C2.42146 6.21484 1.86022 8.86524 2.60142 10.2747Z"
                  stroke="#141B34" stroke-width="1.4" />
                <path d="M10.9648 10.7832H10.9731" stroke="#141B34" stroke-width="1.4" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path
                  d="M14.6196 6.21474L14.5389 5.93233C14.1369 4.52511 13.9358 3.8215 13.4572 3.41905C12.9786 3.0166 12.3429 3.0166 11.0715 3.0166H10.8577C9.58627 3.0166 8.95056 3.0166 8.47196 3.41905C7.99335 3.8215 7.79232 4.52511 7.39026 5.93233L7.30957 6.21474"
                  stroke="#141B34" stroke-width="1.4" />
              </svg>
              <span class="link hide">Talent</span>
            </a>
          </li>
        </ul>
        <h2>Management</h2>
        <div class="divider"></div>
        <ul>

          <li>
            <a href="#time-tracking" title="Time Tracking" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.4475 2.49023V4.31774M5.48242 2.49023V4.31774" stroke="#141B34" stroke-width="1.4"
                  stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M10.961 12.542H10.9692M10.961 16.197H10.9692M14.6119 12.542H14.6201M7.31006 12.542H7.31826M7.31006 16.197H7.31826"
                  stroke="#141B34" stroke-width="1.59" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M3.19775 7.97266H18.7316" stroke="#141B34" stroke-width="1.4" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path
                  d="M2.28418 11.8503C2.28418 7.86884 2.28418 5.87809 3.42831 4.64119C4.57244 3.4043 6.41388 3.4043 10.0968 3.4043H11.8329C15.5158 3.4043 17.3573 3.4043 18.5014 4.64119C19.6455 5.87809 19.6455 7.86884 19.6455 11.8503V12.3196C19.6455 16.3011 19.6455 18.2918 18.5014 19.5287C17.3573 20.7656 15.5158 20.7656 11.8329 20.7656H10.0968C6.41388 20.7656 4.57244 20.7656 3.42831 19.5287C2.28418 18.2918 2.28418 16.3011 2.28418 12.3196V11.8503Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M2.74121 7.97266H19.1888" stroke="#141B34" stroke-width="1.4" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              <span class="link hide">Time Off</span>
            </a>
          </li>
          <li>
            <a href="#time-tracking" title="Time Tracking" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3.65479 10.4346V14.0896C3.65479 17.1048 3.65479 18.6124 4.5915 19.5492C5.52821 20.4859 7.03583 20.4859 10.0511 20.4859H11.8786C14.8938 20.4859 16.4014 20.4859 17.3381 19.5492C18.2749 18.6124 18.2749 17.1048 18.2749 14.0896V10.4346"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M2.74121 8.60681C2.74121 7.9236 2.74121 7.58199 2.92484 7.32755C3.04514 7.16086 3.21816 7.02244 3.42653 6.9262C3.74458 6.7793 4.17159 6.7793 5.0256 6.7793H16.9044C17.7584 6.7793 18.1854 6.7793 18.5035 6.9262C18.7118 7.02244 18.8849 7.16086 19.0052 7.32755C19.1888 7.58199 19.1888 7.9236 19.1888 8.60681C19.1888 9.29001 19.1888 9.63162 19.0052 9.88606C18.8849 10.0528 18.7118 10.1912 18.5035 10.2874C18.1854 10.4343 17.7584 10.4343 16.9044 10.4343H5.0256C4.17159 10.4343 3.74458 10.4343 3.42653 10.2874C3.21816 10.1912 3.04514 10.0528 2.92484 9.88606C2.74121 9.63162 2.74121 9.29001 2.74121 8.60681Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path
                  d="M5.48242 3.84264C5.48242 2.94148 6.21296 2.21094 7.11413 2.21094H7.44047C9.38698 2.21094 10.9649 3.7889 10.9649 5.73542V6.77971H8.41949C6.79739 6.77971 5.48242 5.46474 5.48242 3.84264Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path
                  d="M16.4474 3.84264C16.4474 2.94148 15.7168 2.21094 14.8157 2.21094H14.4893C12.5428 2.21094 10.9648 3.7889 10.9648 5.73542V6.77971H13.5103C15.1324 6.77971 16.4474 5.46474 16.4474 3.84264Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path d="M10.9648 10.4346L10.9648 20.4859" stroke="#141B34" stroke-width="1.4" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>

              <span class="link hide">Time Tracking</span>
            </a>
          </li>
          <li>
            <a href="#expenses" title="Expenses" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M1.82764 11.8539C1.82764 9.0971 1.82764 7.71871 2.6923 6.86228C3.55695 6.00586 4.9486 6.00586 7.73189 6.00586H8.71594C11.4992 6.00586 12.8909 6.00586 13.7555 6.86228C14.6202 7.71871 14.6202 9.0971 14.6202 11.8539V14.7779C14.6202 17.5347 14.6202 18.9131 13.7555 19.7695C12.8909 20.6259 11.4992 20.6259 8.71594 20.6259H7.73189C4.9486 20.6259 3.55695 20.6259 2.6923 19.7695C1.82764 18.9131 1.82764 17.5347 1.82764 14.7779V11.8539Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path
                  d="M14.1977 15.1431H15.0413C17.4273 15.1431 18.6203 15.1431 19.3615 14.3938C20.1027 13.6444 20.1027 12.4383 20.1027 10.0261V7.46761C20.1027 5.05542 20.1027 3.84933 19.3615 3.09996C18.6203 2.35059 17.4273 2.35059 15.0413 2.35059H14.1977C11.8117 2.35059 10.6187 2.35059 9.87746 3.09996C9.22927 3.75526 9.14791 4.75983 9.1377 6.61477"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path d="M5.48242 11.4883H8.22368M5.48242 16.0571H10.0512" stroke="#141B34" stroke-width="1.4"
                  stroke-linecap="round" />
                <path d="M9.59473 3.26465L13.2497 6.46279" stroke="#141B34" stroke-width="1.4"
                  stroke-linejoin="round" />
              </svg>
              <span class="link hide">Expenses</span>
            </a>
          </li>
          <li>
            <a href="#incentives" title="Incentives" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M18.4561 3.19434L3.47422 3.19434C2.78842 3.19434 2.44551 3.19434 2.2081 3.35631C2.0905 3.43653 1.99333 3.54256 1.92419 3.66608C1.7846 3.91548 1.81872 4.2524 1.88696 4.92624C2.00086 6.05095 2.05781 6.61331 2.35599 7.01537C2.50458 7.21572 2.69297 7.38407 2.90965 7.51013C3.34446 7.76311 3.9168 7.76311 5.06148 7.76311L16.8689 7.76311C18.0136 7.76311 18.5859 7.76311 19.0207 7.51013C19.2374 7.38407 19.4258 7.21572 19.5744 7.01537C19.8725 6.61331 19.9295 6.05095 20.0434 4.92624C20.1116 4.2524 20.1458 3.91548 20.0062 3.66608C19.937 3.54256 19.8399 3.43653 19.7223 3.35631C19.4848 3.19434 19.1419 3.19434 18.4561 3.19434Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M2.74121 7.7627L2.74121 12.3688C2.74121 15.7972 2.74121 17.5114 3.81174 18.5764C4.88227 19.6415 6.60526 19.6415 10.0512 19.6415H11.8788C15.3247 19.6415 17.0477 19.6415 18.1183 18.5764C19.1888 17.5114 19.1888 15.7972 19.1888 12.3688V7.7627"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M9.1377 10.5039L12.7927 10.5039" stroke="#141B34" stroke-width="1.4" stroke-linecap="round" />
              </svg>
              <span class="link hide">Incentives</span>
            </a>
          </li>
          <li>
            <a href="#compensation" title="Compensation" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3.65479 10.4346V14.0896C3.65479 17.1048 3.65479 18.6124 4.5915 19.5492C5.52821 20.4859 7.03583 20.4859 10.0511 20.4859H11.8786C14.8938 20.4859 16.4014 20.4859 17.3381 19.5492C18.2749 18.6124 18.2749 17.1048 18.2749 14.0896V10.4346"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M2.74121 8.60681C2.74121 7.9236 2.74121 7.58199 2.92484 7.32755C3.04514 7.16086 3.21816 7.02244 3.42653 6.9262C3.74458 6.7793 4.17159 6.7793 5.0256 6.7793H16.9044C17.7584 6.7793 18.1854 6.7793 18.5035 6.9262C18.7118 7.02244 18.8849 7.16086 19.0052 7.32755C19.1888 7.58199 19.1888 7.9236 19.1888 8.60681C19.1888 9.29001 19.1888 9.63162 19.0052 9.88606C18.8849 10.0528 18.7118 10.1912 18.5035 10.2874C18.1854 10.4343 17.7584 10.4343 16.9044 10.4343H5.0256C4.17159 10.4343 3.74458 10.4343 3.42653 10.2874C3.21816 10.1912 3.04514 10.0528 2.92484 9.88606C2.74121 9.63162 2.74121 9.29001 2.74121 8.60681Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path
                  d="M5.48242 3.84264C5.48242 2.94148 6.21296 2.21094 7.11413 2.21094H7.44047C9.38698 2.21094 10.9649 3.7889 10.9649 5.73542V6.77971H8.41949C6.79739 6.77971 5.48242 5.46474 5.48242 3.84264Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path
                  d="M16.4474 3.84264C16.4474 2.94148 15.7168 2.21094 14.8157 2.21094H14.4893C12.5428 2.21094 10.9648 3.7889 10.9648 5.73542V6.77971H13.5103C15.1324 6.77971 16.4474 5.46474 16.4474 3.84264Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path d="M10.9648 10.4346L10.9648 20.4859" stroke="#141B34" stroke-width="1.4" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              <span class="link hide">Benefits</span>
              <div class="tag hide">New</div>

            </a>
          </li>
          <li>
            <a href="#compensation" title="Compensation" class="tooltip">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M19.1027 10.3234C19.1027 5.27687 15.0117 1.18585 9.96518 1.18585C4.91865 1.18585 0.827637 5.27687 0.827637 10.3234C0.827637 15.3699 4.91865 19.4609 9.96518 19.4609C15.0117 19.4609 19.1027 15.3699 19.1027 10.3234Z"
                  stroke="#141B34" stroke-width="1.4" />
                <path
                  d="M10.7546 6.41372L11.5586 8.03504C11.6682 8.26073 11.9606 8.47721 12.2073 8.51867L13.6646 8.76279C14.5965 8.91939 14.8158 9.60108 14.1442 10.2736L13.0113 11.4159C12.8194 11.6093 12.7144 11.9824 12.7737 12.2495L13.0981 13.6636C13.3539 14.7829 12.7646 15.2158 11.7824 14.6309L10.4165 13.8156C10.1698 13.6682 9.76326 13.6682 9.51201 13.8156L8.14609 14.6309C7.16848 15.2158 6.57461 14.7782 6.83043 13.6636L7.15478 12.2495C7.21417 11.9824 7.1091 11.6093 6.91723 11.4159L5.7843 10.2736C5.11733 9.60108 5.33204 8.91939 6.26397 8.76279L7.72124 8.51867C7.96336 8.47721 8.25573 8.26073 8.36537 8.03504L9.16939 6.41372C9.60794 5.53397 10.3206 5.53397 10.7546 6.41372Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>

              <span class="link hide">Compensation</span>
            </a>
          </li>
          <li>
            <a href="#cost-calculator" title="Cost Calculator" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.74121 9.4248H19.1888" stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path d="M13.7061 5.77051L15.5336 5.77051" stroke="#141B34" stroke-width="1.4" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path
                  d="M19.1888 12.1665V10.339C19.1888 6.46229 19.1888 4.52393 17.9844 3.31958C16.7801 2.11523 14.8417 2.11523 10.965 2.11523C7.08827 2.11523 5.1499 2.11523 3.94556 3.31958C2.74121 4.52393 2.74121 6.46229 2.74121 10.339V12.1665C2.74121 16.0433 2.74121 17.9816 3.94556 19.186C5.1499 20.3903 7.08827 20.3903 10.965 20.3903C14.8417 20.3903 16.7801 20.3903 17.9844 19.186C19.1888 17.9816 19.1888 16.0433 19.1888 12.1665Z"
                  stroke="#141B34" stroke-width="1.4" />
                <path d="M6.396 13.0801H6.87692M10.7243 13.0801H11.2052M15.0526 13.0801H15.5335" stroke="#141B34"
                  stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M6.396 16.7354H6.87692M10.7243 16.7354H11.2052M15.0526 16.7354H15.5335" stroke="#141B34"
                  stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="link hide">Cost Calculator</span>
            </a>
          </li>
          <li>
            <a href="#feedback" title="Feedback" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M20.1027 10.7875C20.1027 15.615 16.0111 19.5292 10.9652 19.5292C10.3719 19.5299 9.78026 19.4751 9.19744 19.3656C8.77795 19.2868 8.5682 19.2474 8.42177 19.2698C8.27534 19.2922 8.06783 19.4025 7.65281 19.6232C6.47877 20.2476 5.1098 20.4681 3.79322 20.2232C4.29362 19.6077 4.63537 18.8692 4.78617 18.0775C4.87754 17.5933 4.65114 17.1228 4.31203 16.7785C2.77185 15.2145 1.82764 13.107 1.82764 10.7875C1.82764 5.96003 5.91923 2.0459 10.9652 2.0459C16.0111 2.0459 20.1027 5.96003 20.1027 10.7875Z"
                  stroke="#141B34" stroke-width="1.4" stroke-linejoin="round" />
                <path d="M10.961 11.1836H10.9692M14.6119 11.1836H14.6201M7.31006 11.1836H7.31826" stroke="#141B34"
                  stroke-width="1.69" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="link hide">Feedback</span>
              <div class="tag hide">Beta</div>

            </a>
          </li>
        </ul>
        <h2>Payroll</h2>
        <div class="divider"></div>
        <ul>

          <li>
            <a href="#payroll" title="Payroll" class="tooltip">
              <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M20.1027 11.158C20.1027 16.2046 16.0117 20.2956 10.9652 20.2956C5.91865 20.2956 1.82764 16.2046 1.82764 11.158C1.82764 6.11152 5.91865 2.02051 10.9652 2.02051C16.0117 2.02051 20.1027 6.11152 20.1027 11.158Z"
                  stroke="#141B34" stroke-width="1.4" />
                <path
                  d="M12.7782 9.4469C12.7782 9.8335 13.0916 10.1469 13.4782 10.1469C13.8648 10.1469 14.1782 9.8335 14.1782 9.4469H12.7782ZM8.92412 12.8688C8.92412 12.4822 8.61072 12.1688 8.22412 12.1688C7.83752 12.1688 7.52412 12.4822 7.52412 12.8688H8.92412ZM11.6654 6.58887C11.6654 6.20227 11.352 5.88887 10.9654 5.88887C10.5788 5.88887 10.2654 6.20227 10.2654 6.58887L11.6654 6.58887ZM10.2654 15.7264C10.2654 16.113 10.5788 16.4264 10.9654 16.4264C11.352 16.4264 11.6654 16.113 11.6654 15.7264H10.2654ZM10.9654 10.3262C10.0963 10.3262 9.63861 10.1875 9.41307 10.0365C9.24748 9.92563 9.15256 9.7749 9.15256 9.4469H7.75256C7.75256 10.1365 8.0003 10.7754 8.63424 11.1998C9.20824 11.5841 10.007 11.7262 10.9654 11.7262V10.3262ZM9.15256 9.4469C9.15256 9.2147 9.27945 8.94538 9.60248 8.70852C9.92508 8.47197 10.4047 8.30435 10.9654 8.30435V6.90435C10.1383 6.90435 9.36148 7.14919 8.77462 7.57951C8.18818 8.00953 7.75256 8.66149 7.75256 9.4469H9.15256ZM10.9654 8.30435C11.5261 8.30435 12.0057 8.47197 12.3283 8.70852C12.6513 8.94538 12.7782 9.2147 12.7782 9.4469H14.1782C14.1782 8.66149 13.7426 8.00953 13.1561 7.57951C12.5693 7.14919 11.7925 6.90435 10.9654 6.90435V8.30435ZM13.0066 12.8688C13.0066 13.2614 12.8463 13.5027 12.545 13.6825C12.2012 13.8878 11.6593 14.0113 10.9654 14.0113V15.4113C11.7855 15.4113 12.6142 15.2717 13.2625 14.8846C13.9534 14.4723 14.4066 13.7923 14.4066 12.8688H13.0066ZM10.9654 14.0113C10.3285 14.0113 9.7833 13.8366 9.41751 13.5907C9.04734 13.3419 8.92412 13.0734 8.92412 12.8688H7.52412C7.52412 13.6818 8.01455 14.3346 8.63652 14.7526C9.26288 15.1736 10.0883 15.4113 10.9654 15.4113V14.0113ZM10.9654 11.7262C11.8401 11.7262 12.3572 11.8577 12.6406 12.0414C12.8604 12.1838 13.0066 12.3988 13.0066 12.8688H14.4066C14.4066 12.0226 14.0961 11.3164 13.4021 10.8666C12.7717 10.458 11.9182 10.3262 10.9654 10.3262V11.7262ZM11.6654 7.60435L11.6654 6.58887L10.2654 6.58887L10.2654 7.60435L11.6654 7.60435ZM10.2654 14.7113V15.7264H11.6654V14.7113H10.2654Z"
                  fill="#141B34" />
              </svg>
              <span class="link hide">Payroll</span>
            </a>
          </li>
        </ul>
      </div>

    </div>
    <div class="sidebar__profile">
      <div class="avatar__wrapper">
        <img class="avatar" src="assets/logo.svg" alt="Joe Doe Picture">
        <div class="online__status"></div>
      </div>
      <div class="avatar__name hide">
        <div class="user-name">Hugeicons Pro</div>
        <div class="email">@huge_icons</div>
      </div>
      <svg class="menu" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M15.7575 9.12369C15.7575 8.50435 15.2554 8.00227 14.6361 8.00227C14.0167 8.00227 13.5146 8.50435 13.5146 9.12369C13.5146 9.74304 14.0167 10.2451 14.6361 10.2451C15.2554 10.2451 15.7575 9.74304 15.7575 9.12369Z"
          fill="#0F1419" fill-opacity="0.8" stroke="#0F1419" stroke-opacity="0.8" stroke-width="0.398729" />
        <path
          d="M10.1501 9.12369C10.1501 8.50435 9.648 8.00227 9.02865 8.00227C8.40931 8.00227 7.90723 8.50435 7.90723 9.12369C7.90723 9.74304 8.40931 10.2451 9.02865 10.2451C9.648 10.2451 10.1501 9.74304 10.1501 9.12369Z"
          fill="#0F1419" fill-opacity="0.8" stroke="#0F1419" stroke-opacity="0.8" stroke-width="0.398729" />
        <path
          d="M4.54314 9.12369C4.54314 8.50435 4.04107 8.00227 3.42172 8.00227C2.80237 8.00227 2.30029 8.50435 2.30029 9.12369C2.30029 9.74304 2.80237 10.2451 3.42172 10.2451C4.04107 10.2451 4.54314 9.74304 4.54314 9.12369Z"
          fill="#0F1419" fill-opacity="0.8" stroke="#0F1419" stroke-opacity="0.8" stroke-width="0.398729" />
      </svg>
    </div>
  </nav>
  <script src="script.js"></script>
</body>

</html>